<!-- 抄表类 -->
<template>
  <LazyRender>
    <div>
      <px-table :data="data" style="margin-bottom: 18px" class="equip-table inner-tabel" size="small" border>
        <px-table-column fixed="left" prop="meterReadingModeDesc" label="抄表方式" min-width="80" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.meterReadingModeDesc }}</span>
          </template>
        </px-table-column>
        <px-table-column
          v-for="(item, colIndex) in meterReadingTableColumnsDefault"
          :key="`table${colIndex}`"
          :label="item.label"
          :prop="item.prop"
          :min-width="item.minWidth"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope" v-if="item.prop === 'eqpName'">
            {{ scope.row.eqpName || scope.row.eqpId || eqpName ? eqpName || `${scope.row.eqpName}(${scope.row.eqpId})` : "" }}
          </template>
          <template #default="scope" v-else>
            <span>{{ scope.row[item.prop] }}</span>
          </template>
        </px-table-column>
        <px-table-column label="抄表值" min-width="200" fixed="right">
          <template #default="scope">
            <TaskFormAction
              v-model:itemValue="scope.row.result"
              :disabled="disabled"
              :validated="validated"
              :isRequired="false"
              :itemProps="[...propsValue, scope.$index, 'result']"
              statusRange=""
              :status="1"
            />
          </template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" min-width="180" align="center">
          <template #default="scope">
            <px-button link type="primary" @click="handleHistory(scope.row)">历史抄表值</px-button>
            <!-- <span style="color: #3b82f6; cursor: pointer" @click="dialogVisible = true">历史操作值</span> -->
          </template>
        </px-table-column>
      </px-table>
      <Teleport to="#task-form-page">
        <px-dialog v-if="dialogVisible" v-model="dialogVisible" title="历史抄表值" width="60%" align-center>
          <div class="header">基本信息</div>
          <px-table class="dialog-table mb-20" :data="baseInfo" border>
            <template v-for="(item, index) in meterReadingTableColumnsDefault" :key="index">
              <px-table-column
                label-class-name="pt-8"
                :prop="item.prop"
                :label="item.label"
                :min-width="item.minWidth"
                :show-overflow-tooltip="item.showOverflowTooltip"
                :fixed="item.fixed"
              >
                <template #default="scope"
                  ><div class="pt-8">{{ scope.row[item.prop] ? scope.row[item.prop] : "-" }}</div></template
                >
              </px-table-column>
            </template>
          </px-table>
          <div class="header">历史抄表值</div>
          <px-table class="dialog-table" :data="historyValue" :max-height="250" border>
            <px-table-column label-class-name="pt-8" type="index" label="序号" :max-width="60" :width="60" align=" center" fixed="left">
              <template #default="scope"
                ><div class="pt-8">{{ scope.$index + 1 }}</div></template
              >
            </px-table-column>
            <template v-for="(item, index) in historyValueColumnsDefault" :key="index">
              <px-table-column
                label-class-name="pt-8"
                :prop="item.prop"
                :label="item.label"
                :min-width="item.minWidth"
                :show-overflow-tooltip="item.showOverflowTooltip"
              >
                <template #default="scope">
                  <div :class="getClassName(item, scope.row)">
                    {{ scope.row[item.prop] ? scope.row[item.prop] : "-" }}
                  </div>
                </template>
              </px-table-column>
            </template>
          </px-table>
        </px-dialog>
      </Teleport>
    </div>
  </LazyRender>
</template>
<script setup lang="ts">
import { historicalPoint } from "@/api/equip/inspectTask";
import LazyRender from "@/components/LazyRender/index.vue";
import TaskFormAction from "@/views/erc/inspect/task/components/TaskFormAction.vue";
import { ref } from "vue";
import { useTaskInfo } from "../hooks/index";
const props = defineProps(["data", "propsValue", "disabled", "validated", "isRequired", "eqpName"]);

const { taskInfo } = useTaskInfo();
const dialogVisible = ref(false);
const meterReadingTableColumnsDefault = ref([
  { prop: "meterReadingItem", label: "抄表项", showOverflowTooltip: true, fixed: "left" },
  { prop: "unit", label: "单位", minWidth: "60", showOverflowTooltip: true },
  { prop: "maxValue", label: "最大值", minWidth: "100" },
  { prop: "minValue", label: "最小值", minWidth: "100" },
  { prop: "eqpName", label: "设备", minWidth: "200" },
  { prop: "autoMeterReadingPointName", label: "自动抄表点", minWidth: "100" }
]);
const baseInfo = ref([]);
const historyValue = ref([]);
const historyValueColumnsDefault = ref([
  { prop: "execTime", label: "抄表时间", minWidth: "100", showOverflowTooltip: true },
  { prop: "result", label: "抄表值", minWidth: "100" }
]);
const handleHistory = async row => {
  dialogVisible.value = true;
  const data: any = await historicalPoint({ meterReadingPoint: row.autoMeterReadingPoint, taskCode: taskInfo.taskCode });

  historyValue.value = data;
  baseInfo.value = [row];
};
const getClassName = (item, row) => {
  if (item.prop === "result" && row.result) {
    const result = Number(row.result);
    const { minValue, maxValue } = baseInfo.value[0];
    const flag = minValue && maxValue && (result < minValue || result > maxValue);
    if (flag) {
      return "pt-8 col-cell-warn";
    }
  }
  return "pt-8";
};
</script>
<style lang="scss" scoped>
.header {
  position: relative;
  padding-left: 16px;
  margin-bottom: 16px;
  font-weight: bold;
  line-height: 22px;
  color: rgb(0 0 0 / 80%);

  &::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 3px;
    height: 16px;
    content: "";
    background: #3b82f6;
    border-radius: 0 100px 100px 0;
    transform: translateY(-50%);
  }
}

.col-cell-warn {
  background-color: rgb(231 91 91);

  color: #fff;
}
.pt-8 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.dialog-table {
  --px-table-border-color: #dfdfdf;

  font-size: 14px;
  &.mb-20 {
    margin-bottom: 20px;
  }

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }
      }
    }
  }
  :deep(.px-table__cell) {
    padding: 0;
    height: 36px;
    line-height: 36px;
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}
</style>
